<template>
    <div class="box">
        <div class="top">
            <h1>添加账号</h1>
        </div>

        <el-form :model="formData" :rules="rules" ref="formRef" class="content">
            <el-form-item label="账号" prop="account">
                <el-input v-model="formData.account" style="height: 40px;" placeholder="请输入账号"
                    @blur="handleBlur('account')" />
            </el-form-item>

            <el-form-item label="密码" prop="password">
                <el-input v-model="formData.password" type="password" style="height: 40px;" placeholder="请输入密码"
                    @blur="handleBlur('password')" />
            </el-form-item>

            <el-form-item label="用户组" prop="userGroup">
                <el-select v-model="formData.userGroup" placeholder="请选择角色" @blur="handleBlur('userGroup')">
                    <el-option label="超级管理员" value="超级管理员" />
                    <el-option label="普通管理员" value="普通管理员" />
                </el-select>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="submitForm">立即添加</el-button>
                <el-button type="primary" @click="resetForm"
                    style="background-color: aliceblue;color:blue;">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup>
import { reactive, ref } from 'vue';
import axios from 'axios';
import { ElMessage } from 'element-plus';
import { add } from '../api/account';
const formRef = ref(null);

// 表单数据
const formData = reactive({
    account: '',
    password: '',
    userGroup: ''
});

// 验证规则
const rules = reactive({
    account: [
        { required: true, message: '请输入账号', trigger: 'blur' },
        { pattern: /^([a-z]|[0-9]){4,10}$/, message: '账号格式不正确', trigger: 'blur' }
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { pattern: /^([a-z]|[0-9]){4,10}$/, message: '密码格式不正确', trigger: 'blur' }
    ],
    userGroup: [
        { required: true, message: '请选择角色', trigger: 'blur' }
    ]
});

// 处理输入框失去焦点事件
const handleBlur = (field) => {
    if (formRef.value) {
        formRef.value.validateField(field);
    }
};

// 提交表单
const submitForm = () => {
    console.log(formData);
    // if (!formRef.value) return;
    formRef.value.validate(async (res) => {
        if (res) {
            let { code, msg } = await add(formData, {  
                headers: {
                    Authorization: `Bearer ${sessionStorage.getItem('token')}`, // 从 sessionStorage 获取 token
                }
            })
            if (code == 0) {
                ElMessage.success(msg);
                resetForm();
            } else {
                ElMessage.error(msg);
                resetForm();
            }
        }
    });
};

// 重置表单
const resetForm = () => {
    if (!formRef.value) return;
    formRef.value.resetFields();
};
</script>

<style scoped>
.box {
    width: 100%;
    height: 100%;
    background-color: #fff;
    border-radius: 6px;
}

.top {
    width: 100%;
    height: 6%;
    font-size: 18px;
    border-bottom: 1px solid #888787;
}

.top h1 {
    margin-left: 20px;
    line-height: 40px;
}

.content {
    width: 400px;
    height: 200px;
}

.el-form {
    margin-left: 100px;
}
</style>